<template>
	<body class="login-body">
		<div class="mobile-banner">
<!--			<img src="assets/layout/images/logo-mobile.svg" alt="prestige-layout"/>-->
			<span style="
    color: rgb(255, 255, 255);
    font-size: 1.32em;
    font-weight: 600;">号卡管理中心</span>
		</div>
		<div class="login-panel">
			<div class="logo">
				<img src="/assets/layout/images/logo.svg" alt="prestige-layout"/>
			</div>
		</div>
		<div class="login-card">
			<div class="top-border"></div>
			<ValidationObserver ref="observer" v-slot="{ handleSubmit }">
			<form class="login-content">
				<h1>登录</h1>
				<p>欢迎使用号卡管理系统</p>
				<ValidationProvider rules="required" name="loginForm.account" v-slot="{ errors }">
				<div class="account-container">
					<label>用户名</label>
					<div class="login-input">
						<InputText  v-model="loginForm.account" placeholder="请输入用户名"/>
						<small class="p-invalid">{{ errors[0]}}</small>
					</div>
				</div>
				</ValidationProvider>
				<ValidationProvider rules="required" name="loginForm.password" v-slot="{ errors }">
				<div class="password-container">
					<label>密码</label>
					<div class="login-input">
							<InputText   v-model="loginForm.password" type="password" placeholder="请输入密码"/>
							<small class="p-invalid">{{ errors[0] }}</small>
					</div>
				</div>
				</ValidationProvider>
				<div class="forgetpassword-container">
					<a @click="addWarnMessage()" class="forget-password">忘记密码?</a>
				</div>
				<div>
					<Button label="登录" @click="handleSubmit(handleLogin)"/>
				</div>
			</form>
			</ValidationObserver>
		</div>
	</body>
</template>

<script>
import Vue from 'vue';
import { ValidationObserver, ValidationProvider } from "vee-validate";
export default {
	name: 'Login',
	components: {
    ValidationObserver,
    ValidationProvider
  },
  data() {
    return {
      loginForm: {
      account: 'admin',
      password: 'admin'
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    // window.addEventListener('storage', this.afterQRScan)
  },
  mounted() {
    if (this.loginForm.account === '') {
      this.$refs.account.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
addWarnMessage() {
  Vue.prototype.$toast.add({severity: 'warn', summary: '通知信息', detail: '请联系上级找回密码', life: 3000});
},
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
          this.loading = true;
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery });
              this.loading = false
            })
			.catch(error => {
				this.loading = false;
				console.log('error:'+JSON.stringify(error));

			});
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
    // afterQRScan() {
    //   if (e.key === 'x-admin-oauth-code') {
    //     const code = getQueryObject(e.newValue)
    //     const codeMap = {
    //       wechat: 'code',
    //       tencent: 'code'
    //     }
    //     const type = codeMap[this.auth_type]
    //     const codeName = code[type]
    //     if (codeName) {
    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
    //         this.$router.push({ path: this.redirect || '/' })
    //       })
    //     } else {
    //       alert('第三方登录失败')
    //     }
    //   }
    // }
  }
}
</script>

<style scoped>

</style>